<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TFDS Images</title>
  </head>
  <style>
    /* 全页loading */
        .showbox {
      position: fixed;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: #eee;
      z-index: 2;
    }
    .loader {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
    }
    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes dash {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
      }

      50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
      }

      100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
      }
    }

    @keyframes color {

      100%,
      0% {
        stroke: #0960bd
      }

      40% {
        stroke: #0960bd
      }

      66% {
        stroke: #0960bd
      }

      80%,
      90% {
        stroke: #0960bd
      }
    }

    .loader:before {
      content: '';
      display: block;
      padding-top: 100%;
    }

    .circular {
      animation: rotate 2s linear infinite;
      height: 100%;
      transform-origin: center center;
      width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

    .path {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
      animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
      stroke-linecap: round;
    }
    /* 全页loading */
  </style>
  <body>
    <div id="app"></div>
    <div class="showbox" id="showbox">
      <div class="loader">
        <svg class="circular" 
        viewBox="25 25 50 50">
          <circle class="path" 
          cx="50"
           cy="50" r="20" 
           fill="none" stroke-width="3" stroke-miterlimit="10"/>
        </svg>
      </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
